<template>
    <div class="chapterExercise">
        <Header></Header>
        <div class="main">
            <div class="banner">
                <img style="width: 100%" src="https://img.js.design/assets/img/617766b867e5da8dd2a409b5.png" alt="">
            </div>
            <div class="breadcrumb">
                <el-breadcrumb :separator-icon="'ArrowRightBold'">
                    <el-breadcrumb-item class="link" @click="toIndex">首页</el-breadcrumb-item>
                    <el-breadcrumb-item class="link" @click="toQuestionBack">我的题库</el-breadcrumb-item>
                    <el-breadcrumb-item class="link" @click="toBack">{{subject_name}}</el-breadcrumb-item>
                    <el-breadcrumb-item class="link">题目详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="align-items: center" v-if="subjects">
                <el-row :gutter="20" style="margin-right: 0">
                    <el-col :span="17">
                        <el-card class="box-card">
                            <template #header>
                                <el-row>
                                    <el-col :span="6" style="display:flex;align-items: center">
<!--                                        <span>{{`第${active_idx+1}题，${active_subject.type_name}`}}</span>-->
                                        <span v-if="active_subject.parent_id">
                                            第{{active_subject.parent_sort}}-{{active_subject.sort}}题，{{active_subject.type_name}}
                                        </span>
                                        <span v-else>
                                            第{{active_subject.sort}}题，{{active_subject.type_name}}
                                        </span>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="card-header">
                                            <div>

                                            </div>
                                            <div style="display: flex;align-items: center">
                                                <el-button-group>
                                                    <el-button :type="active_subject.flag?'primary':''"
                                                               size="small"
                                                               @click="active_subject.flag=!active_subject.flag">
                                                        <el-icon>
                                                            <Flag/>
                                                        </el-icon>
                                                      &nbsp;{{active_subject.flag?' 取消':'标记'}}
                                                    </el-button>
                                                    <el-button @click="addLike(active_subject.topic_id)" size="small" :type="active_subject.is_collect?'primary':''">
                                                        <el-icon><StarFilled /></el-icon>&nbsp;收藏
                                                    </el-button>
                                                    <el-button size="small" @click="checked"><el-icon><View /></el-icon>&nbsp;解析</el-button>
                                                </el-button-group>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>

                            </template>
                          <el-button style="margin-right: 15px;margin-bottom: 15px" size="small" v-if="active_subject && active_subject.parent_id" type="primary" @click="isCase = !isCase">查看题目背景</el-button>
                            <Question
                                    :subject="active_subject"
                                    v-model:user_answer="active_subject.user_answer"
                                    :mode="mode"
                                    @checked="checked">
                            </Question>

                        </el-card>
                        <div style="margin-top: 30px">
                            <el-button-group>
                                <el-button type="primary" @click="pre" :disabled="active_idx<=0">
                                    {{'< 上一题'}}
                                </el-button>
                                <el-button type="primary" @click="next" :disabled="active_idx>=subjects.length-1">
                                    {{'下一题 >'}}
                                </el-button>
                            </el-button-group>
                        </div>
<!--                        <div v-html="leads[active_subject.parent_id]"></div>-->
                    </el-col>
                    <el-col :span="7">
                        <div class="grid-content bg-purple-dark"/>
                        <div class="button-group">
                            <div style="display: flex">
                                <el-button size="small" plain type="primary" :icon="'Tickets'" style="margin-right: 16px" @click="tableOfRates = !tableOfRates">税率表</el-button>
                                <el-button size="small" plain type="primary" :icon="'Search'" @click="showCalculator">计算器</el-button>
                            </div>
                        </div>
                        <div>
                            <Picker
                                    :subjects="subjects"
                                    v-model:index="active_idx"
                                    :height="'300'"
                                    :mode="mode">
                            </Picker>
                        </div>
                        <div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
      <TableOfRates v-model="tableOfRates" :img-url="imgUrl"></TableOfRates>
        <div v-if="active_subject && active_subject.parent_id">
            <Case v-show="isCase" @anliClose="anliClose" :isShowCase="active_subject && active_subject.parent_id ? true:false" :caseContent="active_subject && active_subject.parent_id ? leads[active_subject.parent_id] :''"></Case>
        </div>
        <div class="parent" v-if="isCalculator">
            <Vue3DraggableResizable
                    :initW="280"
                    :minW="220"
                    v-model:x="x"
                    v-model:y="y"
                    v-model:w="w"
                    v-model:h="h"
                    v-model:active="active"
                    :draggable="true"
                    :resizable="true"
                    @activated="print('activated')"
                    @deactivated="print('deactivated')"
                    @drag-start="print('drag-start')"
                    @resize-start="print('resize-start')"
                    @dragging="print('dragging')"
                    @resizing="print('resizing')"
                    @drag-end="print('drag-end')"
                    @resize-end="print('resize-end')"
            >
              <Calculator @closeCalcuator="closeCalcuator"></Calculator>
            </Vue3DraggableResizable>
        </div>
        <staticFooter></staticFooter>
    </div>
</template>

<script>
import TableOfRates from "@/components/TableOfRates";
    import Case from "../../../components/Case";
    import staticFooter from "../../../components/staticFooter";
    import Calculator from "../../../components/calculator/Calculator";
    import SubmitAnswerSheet from "../../../components/submitAnswerSheet/SubmitAnswerSheet";
    import goBackHistory from "../../../utils/hook/goBackHistory";
    import Question from "../../../components/Question/Question";
    import Picker from "../../../components/Picker/Picker";
    import comm_chapter from "../../../hock/composables/comm_chapter";

    import {ref, watch} from 'vue'
    import Header from "../../../components/Header";
    import {useRoute, useRouter} from "vue-router";
    import {reactive,toRefs,onBeforeUnmount} from 'vue'
    import {ElMessage,ElMessageBox} from "element-plus";
    import {meCollect} from "../../../utils/hook/addLike/meCollect";
    import {taxRateTable} from "../../../api/api";
    export default {
        name: "index",
        setup() {
            let route = useRoute();
            let router = useRouter();
            let data = reactive({
                x: 100,
                y: 100,
                h: 100,
                w: 100,
                active: false,
                isCalculator:false,
                isCourse:null,
                method:null,
                type:null,
                topicIDs:null,
                subject_name:'',
                ques_list:[],
                mode:'train',
                single:null,//单项
                multiterm:null,//多项
                synthesize:null,//综合
                useTime:null,//做题时长
                objectiveScore:null,//客观题总分
                score:null, //客观题得分
                isCase:false,
                tableOfRates:false
            })
            data.isCourse = route.params.isCourse;
            data.method = route.params.method;
            data.subject_name = route.params.subject_name;
            data.type = route.params.type;
            data.topicIDs = route.params.topicIDs
            const active_idx = ref(0)
            const active_subject = ref(null)

            let params = {type:Number(data.type)}
            if(data.isCourse == true){
                params['Course'] = localStorage.getItem('Course')
            }
            if(data.topicIDs !== '[]'){
                params['topicIDs'] = JSON.parse(data.topicIDs)
            }
            console.log(useRouter().currentRoute.value.params)
            const {source, subjects, leads,question_id} = comm_chapter(data.method, params)
            watch(active_idx, () => {
                active_subject.value = subjects.value[active_idx.value]
            })
            watch(source, () => {
                active_subject.value = subjects.value[active_idx.value]
            })
            const checked = () => {
                active_subject.value.checked = true
            }
            const next = () => {
                active_idx.value = (active_idx.value + 1) % subjects.value.length
            }
            const pre = () => {
                active_idx.value -= 1
            }

            let anliClose = () =>{
                data.isCase = false
            }

          const closeCalcuator = (param) =>{
            data.isCalculator = param;
          }

            let toIndex = () =>{
                router.push({name:'index'})
                let urlParams = goBackHistory.return_history();
                router.push({name:urlParams.name,params:urlParams.params})
            }
            let toQuestionBack = () =>{
                router.push({name:'MyQuestionBank'})
                let urlParams = goBackHistory.return_history();
                router.push({name:urlParams.name,params:urlParams.params})
            }

            let toBack = () =>{
                let urlParams = goBackHistory.return_history();
                router.push({name:urlParams.name,params:urlParams.params})
            }
            let showCalculator = () =>{
                data.isCalculator = !data.isCalculator
            }
            let print = (val) => {
                console.log(val)
            }

            //添加或取消收藏
            let addLike = (id) =>{
                active_subject.value.is_collect = !active_subject.value.is_collect;
                meCollect(id);
            }
            let imgUrl = ref('')
            let getTaxRateTable = () =>{
                taxRateTable().then(res =>{
                    console.log(res)
                    imgUrl.value = res.data[0]
                })
            }
            getTaxRateTable();
            return {
              closeCalcuator,
                imgUrl,
                anliClose,
                addLike,
                print,
                showCalculator,
                toIndex,
                toQuestionBack,
                question_id,
                toBack,
                ...toRefs(data),
                active_idx,
                active_subject,
                source,
                subjects,
                checked,
                next,
                pre,
                leads,
            }
        },
        components:{
          TableOfRates,
            Header,
            Question,
            Picker,
            SubmitAnswerSheet,
            Calculator,
            staticFooter,
            Case
        }
    }
</script>

<style>
    .button-group .el-button{
        width: 48%;
    }
</style>

<style scoped>
    .parent {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0px;
        right: 200px;
        user-select: none;
    }
    .button-group{
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    .button-group div{
        width: 100%;
    }
    .exam_quesion_score .table-body{
        display: flex;
        justify-content: center;
        padding: 20px 0;
    }
    .exam_quesion_score table tr td{
        text-align: center;
        color: rgba(51, 51, 51, 1);
        font-size: 15px;
        font-weight: 400;
        border: 1px solid rgba(224, 224, 224, 1);
    }
    .exam_quesion_score{
        background-color: #ffffff;
    }
    .exam_quesion_score .title{
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        border-bottom: 1px solid rgba(232, 232, 232, 1);
        margin-bottom: 10px;
    }

    .submit-button{
        width: 100%;
    }
    .percentage-value {
        display: block;
        font-size: 15px;
        color: #409eff;
    }
    .percentage-label {
        display: block;
        margin-top: 5px;
        font-size: 12px;
    }
    .demo-progress{
        padding: 10px;
        background-color: white;
        display: flex;
        justify-content: space-around;
    }
    .chapterExercise{
        background-color: rgba(247, 247, 247, 1);
    }
    .card-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .link{
        cursor: pointer;
    }
    .link:hover{
        color: skyblue;
    }
    .main{
        padding-top: 60px;
        margin: 0 auto;
        width: 75rem;
        margin-bottom: 60px;
    }
    .breadcrumb{
        height: 40px;
        display: flex;
        align-items: center;
    }
    .banner{
        width: 100%;
        height: 15rem;
        position: relative;
        overflow: hidden;
    }
    .banner > img {
        position: absolute;
        top: -100%;

    }
</style>
